<template>
  <pageTool :isSearch="true" :isadd="true">
    <template #default>
      <el-button type="success" class="el-icon-edit" @click="onAddmenus">  添加菜单</el-button>
    </template>
    <template #conter>
      <el-table
        :data="MenustableData"
        style="width: 100%;"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'childs'}"
        v-loading="loading">
      <el-table-column
        prop="title"
        label="标题"
        sortable
        min-width="30%">
        <template #default="{row}">
          <i class="el-icon-folder-opened" v-if="row.pid===null && row.childs">{{row.title}}</i>
          <i class="el-icon-view" v-else-if="row.is_point">{{row.title}}</i>
          <i class="el-icon-folder" v-else>{{row.title}}</i>
        </template>
      </el-table-column>
      <el-table-column
        prop="code"
        label="权限点代码"
        sortable
        min-width="60%">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        min-width="30%">
        <template #default="{row}">
          <el-button type="primary" icon="el-icon-edit" circle @click="onEdit(row.id)"></el-button>
          <el-button type="success" icon="el-icon-delete" circle @click="ondelect(row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <menusDialog :visible.sync="dialogVisible" :selectId="selectId" :differenttitle="differenttitle" @refresh="menusList()"/>
    </template>
  </pageTool>
</template>

<script>
import pageTool from '@/utils/pageTool'
import { findmenusList, DelectMenus } from '@/api/menus'
import menusDialog from './components/menusDialog'
import { thisExpression } from '@babel/types'
export default {
  name: 'menusPage',
  components: {
    pageTool,
    menusDialog
  },
  data () {
    return {
       MenustableData: [],
       dialogVisible: false,
       differenttitle:false,
       selectId: 0,
       loading: false
    }
  },
  created () {
    this.menusList()
  },
  methods: {
    async menusList () {
      this.loading = true
      const list = await findmenusList()
      const listdata = this.treedata(list)  
      this.MenustableData = listdata
      this.loading = false
    },
    treedata (list) {
      return list.map(item=>{
        if(!item.childs) {
          if(item.points) {
            item.childs = item.points
          }
          return item
        }else {
          if (!item.points) {
            this.treedata(item.childs)
            return item
          }else {
            this.treedata(item.childs)
            item.points.forEach(point=> {
              item.childs.push(point)
            })
            return item
          }
        }
      })
    },
    ondelect (id) {
      this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await DelectMenus(id)
          this.$message({
            type: 'success',
            message: '已成功删除!'
          });
          this.menusList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    onAddmenus () {
      this.differenttitle = false
      this.dialogVisible = true
    },
    onEdit (id) {
      this.selectId = id
      this.differenttitle = true
      this.dialogVisible = true
    }
  }
}
</script>

<style>

</style>